<!DOCTYPE HTML>
<html>
 <head>
  <title>分类管理</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link href="__PUBLIC__/assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
   <link href="__PUBLIC__/assets/css/bui-min.css" rel="stylesheet" type="text/css" />
   <link href="__PUBLIC__/assets/css/main.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
  <div class="demo-content">
    <div class="row" style="margin-top:24px;margin-left:24px">
      <div class="span16">
        <div id="grid">
          
        </div>
      </div>
    </div>
    <!-- 初始隐藏 dialog内容 -->
    <div id="content" class="hide">
      <form class="form-horizontal">
        <div class="row">
          <div class="control-group span8">
            <label class="control-label"><s>*</s>分类名称：</label>
            <div class="controls">
              <input name="title" type="text" data-rules="{required:true}" class="input-normal control-text">
            </div>
          </div>
          </div>
          <div class="row">
          <div class="control-group span8">
            <label class="control-label">是否启用：</label>
            <div class="controls">
              <select name="enabled" class="input-normal"> 
                <option value="">请选择</option>
                <option value="1">已启用</option>
                <option value="0">已禁用</option>
              </select>
            </div>
          </div>
        </div>  
      </form>
    </div>
    <script src="__PUBLIC__/assets/js/jquery-1.8.1.min.js"></script>
    <script src="__PUBLIC__/assets/js/bui-min.js"></script>
    <script src="__PUBLIC__/assets/js/sea.js"></script>
    <script src="__PUBLIC__/assets/js/config.js"></script>
    <!-- script start --> 
    <script type="text/javascript">
        BUI.use(['bui/grid','bui/data'],function(Grid,Data){
            var Grid = Grid,
           Store = Data.Store,
          enumObj = {"0" : "已禁用","1" : "已启用"},
          columns = [
            {title : '编号',dataIndex :'cat_id'},
            {title : '分类名称',dataIndex :'title'}, //editor中的定义等用于 BUI.Form.Field.Text的定义
            {title : '启用否', dataIndex :'enabled',renderer:Grid.Format.enumRenderer(enumObj)},
            {title : '操作',renderer : function(){
              return '<span class="grid-command btn-edit">编辑</span>'
            }}
          ];
        var 
          editing = new Grid.Plugins.DialogEditing({
            contentId : 'content', //设置隐藏的Dialog内容
            triggerCls : 'btn-edit', //触发显示Dialog的样式
            editor: {
              title: '编辑'
            },
            autoSave : true //自动添加和更新
          }),
          store = new Store({
            autoLoad:true,
            url : "{:U('Hotel/category_load')}",
            //autoSync : true, //保存数据后自动调用store.load()方法
            proxy : {
              method : 'POST', //更改为POST
              save : "{:U('Hotel/category_handle')}" //会附加一个saveType 的参数，add,remove,update
              //也可以使用一下方式：
              //save : {
              //  addUrl : 'data/add.php',
              //  removeUrl : 'data/remove.php',
              //  updateUrl : 'data/update.php'
              //}
            }
          }),
          grid = new Grid.Grid({
            render:'#grid',
            columns : columns,
            width : 700,
            forceFit : true,
            tbar:{ //添加、删除
                items : [{
                  btnCls : 'button button-small',
                  text : '<i class="icon-plus"></i>添加',
                  listeners : {
                    'click' : addFunction
                  }
                },
                {
                  btnCls : 'button button-small',
                  text : '<i class="icon-remove"></i>删除',
                  listeners : {
                    'click' : delFunction
                  }
                }]
            },
            plugins : [editing,Grid.Plugins.CheckSelection],
            store : store
          });
 
        grid.render();
 
        //保存成功时的回调函数,其实更好的方式是直接在保存成功后调用store.load()方法，更新所有数据
        store.on('saved',function (ev) {
          var type = ev.type, //保存类型，add,remove,update
            saveData = ev.saveData, //保存的数据
            data = ev.data; //返回的数据
 
          //TO DO
          if(type == 'add'){ //新增记录时后台返回id
            saveData.cat_id = data.id;
            grid.updateItem(saveData);
            //store.update()
            //BUI.Message.Alert('添加成功！');
          }else if(type == 'update'){
            //BUI.Message.Alert('更新成功！');
          }else{
            //BUI.Message.Alert('删除成功！');
          }
        });
        //保存或者读取失败
        store.on('exception',function (ev) {
          BUI.Message.Alert(ev.error);
        });
 
        //添加记录
        function addFunction(){
          var newData = {enabled : 0};
          editing.add(newData,'title'); //添加记录后，直接编辑
        }
        //删除选中的记录
        function delFunction(){
          var selections = grid.getSelection(),
            ids = BUI.Array.map(selections,function (item) {
              return item.cat_id;
            });
          store.remove(selections);
          store.save('remove',{ids : ids.join(',')}); //save的第三个参数是回调函数
        }          
      });
    </script>
<!-- script end -->
  </div>
</body>
</html>